<template>
  <div class="">
    <el-breadcrumb separator="/" class="nav">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item ><a href="/goodsman">商品入库</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="0" class="nav">
      <el-col :span="18" :offset="0">
        <el-button type="primary" size="mini" @click="addlogFn"
          >添加入库</el-button
        >
        <el-button
          type="danger"
          size="mini"
          v-if="multipleSelectionFlag"
          @click="popDelete"
          >批量删除</el-button
        >
      </el-col>
      <el-col :span="6" :offset="0">
        <el-input
          placeholder="请输入需要查询的单号"
          size="normal"
          prefix-icon="el-icon-search"
          v-model="search"
          @change="searchData"
        ></el-input>
      </el-col>
    </el-row>

    <el-table
      class="goodsman"
      :data="rukuData"
      border
      ref="multipleTable"
      header-align="center"
      style="width: 1800px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        align="center"
        type="selection"
        header-align="center"
        fixed="left"
      ></el-table-column>

      <el-table-column
        type="index"
        :index="1"
        label="行号"
        width="60px"
        align="center"
        fixed="left"
      >
      </el-table-column>
      <el-table-column label="状态" width="70" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.state ? '已审核' : '待审核' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="receiptid"
        label="单据编号"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="singledate"
        label="创单日期"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="merchandisetype" label="商品类型" align="center">
      </el-table-column>
      <el-table-column prop="supplier" label="供应商" align="center">
      </el-table-column>
      <el-table-column prop="putshop" label="入库门店" align="center">
      </el-table-column>
      <el-table-column prop="classlib" label="柜台/类库名称" align="center">
      </el-table-column>
      <el-table-column prop="order" label="订单号" align="center">
      </el-table-column>
      <el-table-column prop="number" label="数量" align="center">
      </el-table-column>
      <el-table-column prop="weight" label="重量" align="center">
      </el-table-column>
      <el-table-column prop="cost" label="成本" width="100" align="center">
      </el-table-column>
      <el-table-column prop="coefficient" label="系数" align="center">
      </el-table-column>
      <el-table-column prop="labelmoney" label="标签金额" align="center">
      </el-table-column>
      <el-table-column prop="source" label="来源" align="center">
      </el-table-column>
      <el-table-column prop="singleperson" label="创单人" align="center">
      </el-table-column>
      <el-table-column prop="approver" label="审批人" align="center">
      </el-table-column>
      <el-table-column
        prop="approvedate"
        label="审批日期"
        width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        class="in"
        prop=""
        label="操作"
        width="180px"
        fixed="right"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="editDiaLog(scope.$index, scope.row)"
            >编辑</el-button
          >

          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="deleteRow(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页查询 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-size="totalnum"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>

    <!-- 编辑对话框 -->
    <el-dialog
      title="修改商品"
      :visible.sync="editDia"
      width="30%"
      align="left"
    >
      <el-form
        ref="editform"
        :model="editForm"
        label-width="80px"
        size="mini"
        :rules="FormRules"
      >
        <el-form-item label="商品类型">
          <el-select
            v-model="editForm.merchandisetype"
            placeholder="请选择商品类型"
          >
            <el-option label="挂饰类" value="挂饰类"></el-option>
            <el-option label="摆放类" value="摆放类"></el-option>
            <el-option label="壁画类" value="壁画类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="editForm.supplier" style="width: 298px"></el-input>
        </el-form-item>
        <el-form-item label="入库门店">
          <el-select v-model="editForm.putshop" placeholder="请选择门店名称">
            <el-option label="公司总部" value="公司总部"></el-option>
            <el-option label="公司分部" value="公司分部"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="柜台类">
          <el-radio-group v-model="editForm.classlib" size="medium">
            <el-radio border label="黄金类库"></el-radio>
            <el-radio border label="陶瓷类库"></el-radio>
            <el-radio border label="字画类库"></el-radio>
            <el-radio border label="服饰类库"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number
            v-model="editForm.number"
            :min="0"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="重量">
          <el-input-number v-model="editForm.weight" :min="0" :max="100"
            >kg</el-input-number
          >
        </el-form-item>
        <el-form-item label="成本">
          <el-input-number v-model="editForm.cost" :min="0" :max="100"
            >kg</el-input-number
          >
        </el-form-item>
        <el-form-item label="系数">
          <el-input-number v-model="editForm.coefficient" :min="0" :max="100"
            >kg</el-input-number
          >
        </el-form-item>
        <el-form-item label="标签金额">
          <el-input-number
            v-model="editForm.labelmoney"
            :min="0"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="来源">
          <el-radio-group v-model="editForm.source" size="medium">
            <el-radio border label="采购"></el-radio>
            <el-radio border label="自产"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核" width="200px">
          <el-switch
            v-model="editForm.state"
            active-text='通过'
            inactive-text='不通过'
            :active-value="1"
            :inactive-value='0'
          ></el-switch>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="editSubmit">提交</el-button>
          <el-button @click="editDia = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 添加对话框 -->
    <el-dialog title="填写入库信息" :visible.sync="addlog">
      <el-form
        ref="addform"
        :model="sizeForm"
        label-width="80px"
        size="mini"
        :rules="FormRules"
      >
        <el-form-item label="商品类型">
          <el-select v-model="sizeForm.goodstype" placeholder="请选择商品类型">
            <el-option label="挂饰类" value="挂饰类"></el-option>
            <el-option label="摆放类" value="摆放类"></el-option>
            <el-option label="壁画类" value="壁画类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商" prop="gys">
          <el-input v-model="sizeForm.gys" style="width: 298px"></el-input>
        </el-form-item>
        <el-form-item label="订单号" prop="order">
          <el-input v-model="sizeForm.order" style="width: 298px"></el-input>
        </el-form-item>
        <el-form-item label="入库门店">
          <el-select v-model="sizeForm.rkmendian" placeholder="请选择门店名称">
            <el-option label="公司总部" value="公司总部"></el-option>
            <el-option label="公司分部" value="公司分部"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="柜台类">
          <el-radio-group v-model="sizeForm.guitai" size="medium">
            <el-radio border label="黄金类库"></el-radio>
            <el-radio border label="陶瓷类库"></el-radio>
            <el-radio border label="字画类库"></el-radio>
            <el-radio border label="服饰类库"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number
            v-model="sizeForm.num"
            :min="0"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="重量">
          <el-input-number
            v-model="sizeForm.zongliang"
            :min="0"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="成本">
          <el-input-number
            v-model="sizeForm.chenben"
            :min="0"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="系数">
          <el-input-number
            v-model="sizeForm.xishu"
            :min="0"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="标签金额">
          <el-input-number
            v-model="sizeForm.bqjiane"
            :min="0"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="来源">
          <el-radio-group v-model="sizeForm.resource" size="medium">
            <el-radio border label="采购"></el-radio>
            <el-radio border label="自产"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="addSubmit">立即添加</el-button>
          <el-button @click="addlog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 批量删除对话框 -->
    <el-dialog :visible.sync="multiDeleteVisible" title="提示" width="30%">
      <span>确定要删除吗</span>
      <span slot="footer">
        <el-button type="primary" @click="multiDelete">确 定</el-button>
        <el-button @click="multiDeleteVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { createLogger } from 'vuex'

import { getKuList } from '../http/api'
export default {
  computed: {
    username() {
      return this.$store.state.user.username
    },
  },
  data() {
    return {
      //默认每页显示X条
      totalnum: 7,
      //设置默认当前页是第几页
      nowpage: 1,
      //批量删除选中id
      multipleSelectionFlag: false,
      multiDeleteVisible: false,
      multipleSelection: '',
      addlog: false,
      editDia: false, //控制修改对话框的显示与隐藏
      search: '',
      total: 0,
      rukuData: [
        {
          // id: '1',
          // state: 1,
          // receiptid: 'GPR12A0001',
          // singledate: '2021年6月9日10:12:11',
          // merchandisetype: '镶嵌类',
          // supplier: '爱迪尔',
          // putshop: '公司总部',
          // classlib: '柜台/库',
          // order: '单号',
          // number: '6',
          // weight: '45.7000',
          // cost: '17,388.87',
          // coefficient: '0',
          // labelmoney: '0',
          // source: '采购',
          // singleperson: 'xxx',
          // approver: 'xxx',
          // approvedate: '2021年6月9日10:29:19',
        },
      ],
      sizeForm: {
        goodstype: '', //商品类型
        gys: '', //供应商
        rkmendian: '', //入库门店
        guitai: '', //柜台
        zongliang: '', //重量
        chenben: '', //成本
        xishu: '', //系数
        bqjiane: '', //标签金额
        resource: '', //来源
        cdr: '', //创单人
        num: 0, //数量
        state: 0, //状态
        receiptid:'',//单号
        singledate:'',
        order:''
      },
      editForm: {
        merchandisetype: '', //商品类型
        supplier: '', //供应商
        putshop: '', //入库门店
        classlib: '', //柜台
        weight: '', //重量
        cost: '', //成本
        coefficient: '', //系数
        labelmoney: '', //标签金额
        source: '', //来源
        cdr: '', //创单人
        number: '', //数量
        state: '', //状态
      },

      FormRules: {
        gys: [
          {
            required: true,
            message: '请输入数量',
            trigger: 'blur',
          },
          { min: 3, max: 10, message: '长度在 3 到10 个字符', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    //定义生命周期函数
    // this.getKudata()
    // console.log('111',this.rukuData.length)
    this.selfirstdata()
  },
  methods: {
    //所有的事件处理函数
    // ...mapActions(['setGoodsSync']),
    // 获取所有产品分类数据
    getKudata() {
      getKuList()
        .then((res) => {
          console.log(res)
          if (res.data.value.code == 200) {
            this.rukuData = res.data.value.data
            console.log('ruku', this.rukuData.length)
            this.total = Number(this.rukuData.length)
          }
        })
        .catch((err) => {
          console.log('错误：', err)
        })
    },

    //查询第一页数据
    selfirstdata() {
      this.$axios({
        url: '/putStorage/selectLimit',
        method: 'post',
        data: {
          page: this.nowpage,
          size: this.totalnum,
        },
      })
        .then((res) => {
          console.log('分页查询的数据', res)
          this.rukuData = res.data.value.data
          this.total = res.data.value.count
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 添加数据提交请求
    addSubmit() {
      console.log(this.sizeForm)
      // console.log(this.$refs.addform.model);
      // addGoods({
      //    approvedate : this.sizeForm.date1 + this.sizeForm.date2,
      //    supplier : this.sizeForm.name,
      //    classlib : this.sizeForm.resource,
      //    source : this.sizeForm.source

      // })
      // .then((res)=>{
      //   console.log(res);
      // this.addlog = false
      // this.sizeForm={};
      // })
      // .catch((err)=>{
      //   console.log(err);
      // })
      //添加请求
      this.$axios({
        url: '/putStorage/insertCommodity',
        method: 'post',
        data: {
          merchandisetype: this.sizeForm.goodstype,
          supplier: this.sizeForm.gys,
          putshop: this.sizeForm.rkmendian,
          classlib: this.sizeForm.guitai,
          number: this.sizeForm.num,
          weight: this.sizeForm.zongliang,
          cost: this.sizeForm.chenben,
          coefficient: this.sizeForm.xishu,
          labelmoney: this.sizeForm.bqjiane,
          singleperson: this.username,  //vex 
          source: this.sizeForm.resource,
          receiptid: this.sizeForm.receiptid,
          singledate: this.sizeForm.singledate,
          order:this.sizeForm.order 
        },
      }).then((res) => {
        this.sizeForm = {}
        console.log(res)
        this.addlog = false
        // this.getKudata()
        this.selfirstdata()
      })
    },

    //提交编辑
    editSubmit() {

      this.$axios({
        url: '/putStorage/updateCommodity',
        method: 'post',
        data: {
          id: this.editForm.id,
          merchandisetype: this.editForm.merchandisetype,
          supplier: this.editForm.supplier,
          putshop: this.editForm.putshop,
          classlib: this.editForm.classlib,
          number: this.editForm.number,
          weight: this.editForm.weight,
          cost: this.editForm.cost,
          coefficient: this.editForm.coefficient,
          labelmoney: this.editForm.labelmoney,
          approver: this.username,
          source: this.editForm.source,
          state: this.editForm.state,
        },
      })
        .then((res) => {
          this.editForm = {}
          console.log(res)
          console.log('状态：',this.editForm)

          this.editDia = false
          // this.getKudata()
          // console.log('store',this.username);
          this.selfirstdata()
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // changeFun(val) { //获取用户的选中
    //   console.log(val[1]);
    //   this.multipleSelection = val // 返回的是选中的列的数组集合
    //   val.forEach(item => {
    //   this.multipleSelection.push(item.id);   //把所有的id放进multipleSelection
    //   })
    //   console.log(this.multipleSelection)

    // },

    //多选
    popDelete() {
      this.multiDeleteVisible = true
    },
    //批量删除
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
      this.multipleSelectionFlag = true
      if (this.multipleSelection.length == 0) {
        // 如不进行判断则勾选完毕后批量删除按钮还是会在
        this.multipleSelectionFlag = false
      }
    },
    //多选框选
    multiDelete() {
      this.multiDeleteVisible = false
      let checkArr = this.multipleSelection // multipleSelection存储了勾选到的数据
      let params = []
      //  let self = this;

      checkArr.forEach(function (item) {
        params.push(item.id) // 添加所有需要删除数据的id到一个数组，post提交过去
      })
      console.log('1:"', params)
      this.$axios({
        url: '/putStorage/deleteById',
        method: 'post',
        data: params,
      })
        .then((res) => {
          console.log(res)
          // this.getKudata()
          this.selfirstdata()

          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          // row.splice(index, 1)
          //请求失败
        })
        .catch((err) => {
          console.log(err)
        })

      //    //  $http即是axios，可以在main.js里面设置 Vue.prototype.$http = axios;
      //  this.$http.post('/fashion/multiDelete', params).then(function (res) {
      //    if (res.data.status == '1') {
      //      self.$message({
      //        message: '删除成功',
      //        type: 'success'
      //      });
      //    }
      //   //  self.getFashionList(1, 1, 5);
      //  })
    },
    //单条删除
    deleteRow(index, row) {
      console.log(row.id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
         
          this.$axios({
            url: '/putStorage/deleteById',
            method: 'post',
            data: [row.id],

            //请求成功的情况
          })
            .then((res) => {
              console.log(res)
              // this.getKudata()
              this.selfirstdata()

              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              // row.splice(index, 1)
              //请求失败
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },

    editDiaLog(index, row) {
      // console.log(row.id)
      this.editDia = true
      this.$axios({
        url: '/putStorage/selectByLike',
        method: 'post',
        data: {
          id: row.id,
        },
      })
        .then((res) => {
          // console.log('编辑按钮查询：', res.data.value.data)
          this.editForm = res.data.value.data[0]
          console.log('编辑状态表单：', this.editForm)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //点击某一页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.nowpage = val
      this.$axios({
        url: '/putStorage/selectLimit',
        method: 'post',
        data: {
          page: this.nowpage,
          size: this.totalnum,
        },
      })
        .then((res) => {
          console.log('后端返回的数据', res)
          this.rukuData = res.data.value.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    //每页显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.totalnum = val
      this.$axios({
        url: '/putStorage/selectLimit',
        method: 'post',
        data: {
          page: this.nowpage,
          size: this.totalnum,
        },
      })
        .then((res) => {
          console.log('后端返回的数据', res)
          this.rukuData = res.data.value.data
        })
        .catch((err) => {
          console.log(err)
        })
      // chaxun(this.nowpage,this.totalnum)
    },
    //搜索
    searchData() {
      // console.log('1')
      this.$axios({
        url: '/putStorage/selectByLike',
        method: 'post',
        data: {
          receiptid: this.search,
        },
      })
        .then((res) => {
          // console.log(res)
          // this.rukuData={}
          this.rukuData = res.data.value.data
          console.log('搜索的内容',this.rukuData)
          this.search = ''
          this.total = res.data.value.data.length
          // console.log('totalnum',this.total);
          // this.selfirstdata()
          

          
        })
        .catch((err) => {
          console.log(err)
        })

      
    },
    //添加
    addlogFn(){
      this.$axios({
                url:'/putStorage/resultDateAndCoding',
                method:'post'
            }).then(res=>{
              this.addlog = true
              this.sizeForm.receiptid = res.data.value.data.receiptid
              this.sizeForm.singledate = res.data.value.data.singledate 
              console.log('单号',this.sizeForm.receiptid ,'时间',this.sizeForm.singledate)
              console.log('添加查询：',this.sizeForm)
            }).catch(err=>{
                console.log(err)
            })

        
    }
  },
}
</script>

<style type="text/css" lang="less">
.el-table th > .cell {
  text-align: center;
}
.nav {
  margin-bottom: 10px;
}
</style>

